import { Picker, View } from '@tarojs/components'
import Taro, { Component } from '@tarojs/taro'
import { AtButton, AtForm, AtInput, AtTabs, AtTabsPane, AtTextarea } from 'taro-ui'
import MdPreview from '../../components/md-preview'

const http = require('../../utils/http.js')
const show = require('../../utils/show.js')

export default class NoteEdit extends Component {
    config = {
        navigationBarTitleText: '编辑笔记'
    }

    constructor() {
        super(...arguments)
        this.state = {
            loading: false,
            currentIndex: 0,
            types: [{ id: 1, name: 'test' }],
            formObj: {
                id: null,
                typeId: null,
                typeName: '',
                title: '',
                content: '',
            },
            markdownContent: ''
        }
    }

    componentWillMount() {
        let params = this.$router.params
        this.setState({ formObj: { ...params } })
        this.fetchTypes()
        if (params.id) {
            this.fetch(params.id)
        }
        let titleText = params.id ? '修改笔记' : '创建笔记'
        Taro.setNavigationBarTitle({ title: titleText })
    }
    fetch = (noteId) => {
        this.setState({ loading: true })
        http.get2('/api/note/note/find-one/' + noteId)
            .then(res => {
                this.setState({
                    loading: false,
                    formObj: { ...res }
                })
            })
    }
    fetchTypes = () => {
        http.get2('/api/note/type/find-all')
            .then(res => {
                let types = res
                this.setState({ types })
            })
    }

    handleChangeTitle = (value) => this.handleChange('title', value)
    handleChangeContent = (value) => this.handleChange('content', value)
    handleChangeTypeId = (e) => {
        let index = e.detail.value
        let type = this.state.types[index]
        this.handleChange('typeId', type.id)
        this.handleChange('typeName', type.name)
    }
    handleChange = (key, value) => {
        var formObj = this.state.formObj || {}
        formObj[key] = value
        this.setState({ formObj: formObj })
        return value
    }
    onSubmit = () => {
        if (!this.state.formObj.typeId) {
            show.warn('请选择分类')
            return
        }
        if (!this.state.formObj.title) {
            show.warn('请输入标题')
            return
        }
        http.post2('/api/note/note/save', this.state.formObj)
            .then(res => {
                show.success('保存成功')
                    .then((info) => {
                        Taro.navigateBack({ delta: 1 })
                    })
            })
    }

    onTabClick = (index) => {
        let markdownContent = index == 1 ? this.state.formObj.content : ''
        this.setState({
            currentIndex: index,
            markdownContent
        })
    }

    render() {
        return (
            <View>
                <AtToast isOpened={this.state.loading} text="加载中" icon="loading"></AtToast>
                <AtTabs
                    current={this.state.currentIndex}
                    scroll
                    tabList={[
                        { title: '　　编　辑　　' },
                        { title: '　　预　览　　' },
                    ]}
                    onClick={this.onTabClick}
                >
                    {/* 编辑 */}
                    <AtTabsPane current={this.state.currentIndex} index={0}>
                        <AtForm>
                            <Picker
                                mode='selector'
                                range={this.state.types}
                                rangeKey='name'
                                onChange={this.handleChangeTypeId}
                            >
                                <AtInput
                                    title='分类'
                                    type='text'
                                    placeholder='请选择分类'
                                    value={this.state.formObj.typeName} />
                            </Picker>
                            <AtInput
                                name='title'
                                title='标题'
                                type='text'
                                placeholder='请输入标题'
                                value={this.state.formObj.title}
                                onChange={this.handleChangeTitle}
                            />
                            <AtTextarea
                                value={this.state.formObj.content}
                                onChange={this.handleChangeContent}
                                maxLength={5000}
                                textOverflowForbidden={false}
                                height={550}
                                placeholder='可选择性输入内容，格式是 Markdown'
                            />
                        </AtForm>
                    </AtTabsPane>

                    {/* 预览 */}
                    <AtTabsPane current={this.state.currentIndex} index={1}>
                        <MdPreview
                            title={this.state.formObj.title}
                            content={this.state.markdownContent}
                            marginTop='20rpx'
                            marginBottom='100rpx'
                        />
                    </AtTabsPane>
                </AtTabs>
                <View style={{ position: 'fixed', bottom: '0rpx', width: '100%' }}>
                    <AtButton type='primary' onClick={this.onSubmit}>保存</AtButton>
                </View>
            </View>
        )
    }
}